﻿@model IEnumerable<GoDinner.Models.GerechtType>

<h1>Bestelling invoeren</h1>
<aside>
    <div id="bestelling">
        @Html.Action("GetCartView", "Reservation")
    </div>
    <br/><br/>
    <a href="@Url.Action("CheckOut", "Reservation")" style="border-radius:10px; background-color:#ccc; padding:10px; margin: 0 auto;">Ga verder</a>
</aside>
<div id="products">
    @foreach (var gerechtTypes in Model)
    {
        <h2>@gerechtTypes.Naam</h2>
        <table class="reservation-table">
            @foreach (var gerecht in gerechtTypes.Gerechten)
            {
                <tr>
                    <td>@gerecht.Naam</td>
                    <td>&euro; @gerecht.Prijs</td>
                    <td><a class="g-button g-add" data-id="@gerecht.Id" href="#">+</a></td>
                </tr>
            }

        </table>
    }
</div>

@section Scripts{
    <script type="text/javascript">
        $.ajaxSetup({ cache: false });
        $(document).ready(function () {
            $('.g-add').on('click', function () {
                $.ajax({
                    url: '@Url.Action("AddGerecht", "Reservation")',
                    data: { gerechtId: $(this).attr('data-id') },
                    type: 'POST',
                    success: function (data) {
                        getShoppingCart();
                    },
                    cache: false
                });
                return false;
            });
            $(document).on('click', '.g-remove', function(e){
            //$('.g-remove').on('click', function () {
                console.log("Test");
                $.ajax({
                    url: '@Url.Action("RemoveGerecht", "Reservation")',
                    data: { gerechtId: $(this).attr('data-id') },
                    type: 'POST',
                    success: function (data) {
                        getShoppingCart();
                    },
                    cache: false
                });
                return false;
            });

            function getShoppingCart() {
                $.ajax({
                    url: '@Url.Action("GetCartView", "Reservation")',
                    dataType: 'html',
                    success: function (data) {
                        $('#bestelling').html(data);
                    }
                })
            }
        });
    </script>
}